<template>
  <div id="box">
    <elr-row id="title">
      <h2 style="margin-top: 0">个人信息</h2>
    </elr-row>
    <el-row>
      <el-col :span="10">
        <div class="user_image">
          <img src="../../img/user.jpg">
        </div>
      </el-col>
      <el-col :span="13" v-if="inputState">
        <div v-for="(item, index) in Student_profile"
             :key="index"
             class="list">
          <el-row type="flex" justify="space-around">
            <el-col :offset="3"><span>{{item.name}}</span></el-col>
            <el-col :offset="3">
              <span>{{Student_profile_data[item.data]}}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="13" v-else>
        <div class="list">
          <editor-personal-information ref="editorPersonalInformation"></editor-personal-information>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="6" :offset="4"><el-button type="primary" round icon="el-icon-edit" @click="editorFunction" :disabled="!disabled_state">编辑</el-button></el-col>
      <el-col :span="6"><el-button type="primary" round icon="el-icon-check" @click="submitFunction" :disabled="disabled_state" :logining="logining">提交</el-button></el-col>
    </el-row>
  </div>
</template>

<script>
  import editorPersonalInformation from './editorPersonalInformation'
  export default {
    name: "PersonalInformation",
    components: {
      editorPersonalInformation
    },
    data() {
      return {
        logining: false,
        inputState: true,
        disabled_state: true,
        Student_profile: [{
          name: '姓名 :',
          data: 'name'
        }, {
          name: '性别 :',
          data: 'sex'
        }, {
          name: '民族 :',
          data: 'nationality'
        }, {
          name: '籍贯 :',
          data: 'nativePlace'
        }, {
          name: '学院 :',
          data: 'college'
        }, {
          name: '专业 :',
          data: 'professional'
        }, {
          name: '班级 :',
          data: 'class'
        }, {
          name: '学号 :',
          data: 'number'
        }, {
          name: '政治面貌 :',
          data: 'politicsStatus'
        }, {
          name: '联系电话 :',
          data: 'phoneNumber'
        }],
        Student_profile_data: {
          name: '张三',
          sex:'男',
          nationality:'汉族',
          nativePlace:'广东',
          college: '互联网金融与信息工程学院',
          professional: '软件工程',
          class: '17软件工程1班',
          number: '17B543153',
          politicsStatus: '团员',
          phoneNumber: '1234567890',
        }
      }
    },
    beforeMount:function(){
      var url = this.HOME + '';  //获得数据接口
      this.$axios.get(url).then((response) => {
        this.datalist = response.data;
        // console.log(this.datalist);
        sessionStorage.setItem('userData',JSON.stringify(this.datalist));  //将拿回来的数据用JSON.stringify转成字符串，然后存到键值对中
        this.Student_profile_data = JSON.parse(this.datalist);
      })
    },
    methods: {
      editorFunction(){
        this.edit_state = false;
        this.inputState = !this.inputState;
        this.disabled_state = !this.disabled_state;
      },
      submitFunction(){
        this.logining = true;
        this.$refs.editorPersonalInformation.submit();
        this.logining = false;
        this.inputState = !this.inputState;
        this.disabled_state = !this.disabled_state;
      }
    }
  }
</script>

<style scoped>
  #box{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .52), 0 0 6px rgba(0, 0, 0, .04);
  }

  #title{
    text-align: center;
  }

  .user_image{
    text-align: center;
    margin: 60px 0;
  }

  .list{
    padding: 15px;
  }

  span {
    font-size: 30px;
    font-family: KaiTi;
  }
</style>
